import QtQuick 2.15
import QtQuick.Layouts 2.15
import Qt5Compat.GraphicalEffects

Rectangle {
    id:securityCard
    Layout.fillHeight:true
    Layout.fillWidth:true
    radius: 20
    clip:true
    color:cardColor

    layer.enabled: true
    layer.effect: OpacityMask{
        maskSource: Rectangle{
            width: securityCard.width
            height: securityCard.height
            radius: securityCard.radius
        }
    }

    RowLayout {
        anchors.fill: parent
        anchors.centerIn: parent
        anchors.margins: 10
        Rectangle{//图片区域
            Layout.row: 0
            Layout.fillHeight: true
            Layout.fillWidth: true
            color:"transparent"
            Rectangle{
                id:securityCardImg
                width: parent.width-10
                height: parent.height-10
                anchors.centerIn: parent
                radius: 10
                layer.enabled: true
                layer.effect: OpacityMask{
                    maskSource: Rectangle{
                        width: securityCardImg.width
                        height: securityCardImg.height
                        radius: securityCardImg.radius
                    }
                }
                Image{
                    anchors.fill: parent
                    source: "qrc:/img/img/background1.jpg"
                    Text{
                        anchors.top: parent.top
                        text:"警戒中"
                        color:textColor
                        x:20
                    }
                }
            }
            MouseArea{
                anchors.fill: parent
                onClicked:{
                    rootStackView.push(cameraPage)
                }
            }
        }
        Rectangle{//按钮区域
            Layout.row: 1
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "transparent"
            Rectangle{
                id:securityBtn
                anchors.fill: parent
                anchors.centerIn: parent
                color:"transparent"
                radius: 10
                layer.enabled: true
                layer.effect: OpacityMask{
                    maskSource: Rectangle{
                        width: securityBtn.width
                        height: securityBtn.height
                        radius: securityBtn.radius
                    }
                }
                Column{
                    anchors.fill: parent
                    spacing:10

                    Rectangle{//第一个按钮
                        id:btn1
                        width: parent.width
                        height: (parent.height-parent.padding)/5*2
                        color: btnColor
                        radius: 10
                        RowLayout{
                            anchors.fill: parent
                            spacing: 2
                            Image{
                                source: "qrc:/icon/icon/m_back_home.svg"
                                y:parent.height / 3
                            }
                            Text{
                                text:"开启警戒"
                                color:textColor
                                y:parent.height / 2
                            }
                        }
                        MouseArea{
                            anchors.fill: parent
                            onClicked:{
                                var jsonData={
                                    "command":"scene",
                                    "data":{
                                        "name":"开启警戒",
                                        "state":1
                                    }
                                }
                                tcpSocket.sendMsg(jsonData)
                            }
                            onPressed:{
                                parent.color="transparent"
                            }
                            onReleased:{
                                parent.color=btnColor
                            }
                        }
                    }
                    Rectangle{
                        id:btn2
                        width: parent.width
                        height: (parent.height-parent.padding)/5*2
                        color: btnColor
                        radius: 10
                        RowLayout{
                            anchors.fill: parent
                            Image{
                                source: "qrc:/icon/icon/m_leave_home.svg"
                                y:parent.height / 3
                            }
                            Text{
                                text:"关闭警戒"
                                color:textColor
                                y:parent.height / 2
                            }
                        }
                        MouseArea{
                            anchors.fill: parent
                            onClicked:{
                                var jsonData={
                                    "command":"scene",
                                    "data":{
                                        "name":"关闭警戒",
                                        "state":0
                                    }
                                }
                                tcpSocket.sendMsg(jsonData)
                            }
                            onPressed:{
                                parent.color="transparent"
                            }
                            onReleased:{
                                parent.color=btnColor
                            }
                        }
                    }
                }
            }
        }
    }
}
